<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>notepad</title>
</head>
<style type="text/css">
ol,ul{
display:block;
list-style-type:none;
margin:3px;
}
</style><body>
<div>&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&nbsp; &lt;title&gt;&#28526;&#27733;&#25169;&#20811;&lt;/title&gt;<br>
&nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
&nbsp; &lt;style&gt;<br>
&nbsp;&nbsp;&nbsp; .card { <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 18vw; height: 24vw;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border: 1px solid #555; margin: 1vw;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; display: inline-block; border-radius: 3vw;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; text-align: center; line-height: 24vw;<br>
&nbsp;&nbsp;&nbsp; }<br>
&nbsp; &lt;/style&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&nbsp; &lt;div id="players"&gt;&lt;/div&gt;<br>
&nbsp; &lt;div id="handCards"&gt;&lt;/div&gt;<br>
&nbsp; &lt;script&gt;<br>
&nbsp;&nbsp;&nbsp; // &#20351;&#29992; LeanCloud &#23454;&#26102;&#36890;&#20449;&#65288;&#20813;&#36153;&#29256;&#65289;<br>
&nbsp;&nbsp;&nbsp; const APP_ID = 'CZUmPUqJObW1hwNM9ztJapp5-gzGzoHsz';<br>
&nbsp;&nbsp;&nbsp; const APP_KEY = 'LPo5aBtHsyZ1yRZAPijGPbUD';<br>
&nbsp;&nbsp;&nbsp; <br>
&nbsp;&nbsp;&nbsp; // &#21021;&#22987;&#21270;<br>
&nbsp;&nbsp;&nbsp; const { Realtime } = AV;<br>
&nbsp;&nbsp;&nbsp; const realtime = new Realtime({ appId: APP_ID, appKey: APP_KEY });<br>
&nbsp;&nbsp;&nbsp; <br>
&nbsp;&nbsp;&nbsp; // &#21019;&#24314;&#25151;&#38388;&#65288;&#33258;&#21160;&#20174;URL&#33719;&#21462;&#65289;<br>
&nbsp;&nbsp;&nbsp; const roomId = window.location.hash.slice(1) || Math.random().toString(36).substr(2,6);<br>
&nbsp;&nbsp;&nbsp; if(!window.location.hash) location.hash = roomId;<br>
&nbsp;&nbsp;&nbsp; <br>
&nbsp;&nbsp;&nbsp; // &#21152;&#20837;&#25151;&#38388;<br>
&nbsp;&nbsp;&nbsp; const client = realtime.createIMClient('&#29992;&#25143;' + Date.now());<br>
&nbsp;&nbsp;&nbsp; const room = client.getConversation(roomId);<br>
&nbsp;&nbsp;&nbsp; <br>
&nbsp;&nbsp;&nbsp; // &#26174;&#31034;&#20854;&#20182;&#29609;&#23478;<br>
&nbsp;&nbsp;&nbsp; room.queryOnlineMembers().then(users =&gt; {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById('players').innerHTML = users<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .map(u =&gt; `&#128100; ${u}`).join(' ');<br>
&nbsp;&nbsp;&nbsp; });<br>
&nbsp;&nbsp;&nbsp; // &#26174;&#31034;&#25163;&#29260;&#65288;&#31034;&#20363;&#65289;<br>
&nbsp;&nbsp;&nbsp; const cards = ['&#9824;5', '&#9829;K', '&#9830;2', '&#9827;8']; // &#28526;&#27733;&#29305;&#33394;&#29260;<br>
&nbsp;&nbsp;&nbsp; document.getElementById('handCards').innerHTML = cards<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .map(c =&gt; `&lt;div class="card" onclick="play('${c}')"&gt;${c}&lt;/div&gt;`).join('');<br>
&nbsp;&nbsp;&nbsp; // &#20986;&#29260;&#21151;&#33021;<br>
&nbsp;&nbsp;&nbsp; window.play = (card) =&gt; {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; room.send({ text: card }); // &#21457;&#36865;&#32473;&#25152;&#26377;&#29609;&#23478;<br>
&nbsp;&nbsp;&nbsp; }<br>
&nbsp;&nbsp;&nbsp; // &#25509;&#25910;&#20854;&#20182;&#29609;&#23478;&#30340;&#29260;<br>
&nbsp;&nbsp;&nbsp; room.on('message', message =&gt; {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; const newCard = document.createElement('div');<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newCard.className = 'card';<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; newCard.textContent = message.text;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.body.appendChild(newCard);<br>
&nbsp;&nbsp;&nbsp; });<br>
&nbsp; &lt;/script&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;</div>
</body>
</html>